<%-- 
    Document   : fileupload
    Created on : Sep 8, 2011, 2:15:37 PM
    Author     : Mikeno
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>

        <title>File Upload</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
              rel="stylesheet" type="text/css"/>
        <link href="style/ui.all.css" rel="stylesheet" type="text/css"/>
        <link href="style/ui.core.css" rel="stylesheet" type="text/css"/>
        <link href="style/ui.progressbar.css" rel="stylesheet" type="text/css"/>


        <style type="text/css">
            .ui-progressbar-value { background-image: url(images/progressBarImage.jpg); }
            .backgroundClass
            {
                background-image: url(images/background.jpg);
                color:white;
            }
        </style>

        <script src="scripts/jquery.js"></script>
        <script src="scripts/ui.core.js"></script>
        <script src="scripts/ui.progressbar.js"></script>
        <script src="scripts/ui.resizable.js"></script>
        <script >
            var progressBarValue=0;
            $(document).ready(function() {
                $( "#progressbar" ).progressbar({             value:0         });
                document.getElementById("progressbarWrapper").style.display = "none";
            });
            function updateProgressBar(progressBarValue)
            {
                $("#progressbar").progressbar("option","value",progressBarValue);
            }
            var req;

            function ajaxFunction(){
                var url = "/HyperMarket/FileUploadServlet";

                if (window.XMLHttpRequest){
                    req = new XMLHttpRequest();
                    try{
                        req.onreadystatechange = funcReadyStateChange;
                        req.open("GET", url, true);
                    } catch (e) {
                        alert(e);
                    }
                    req.send(null);
                }

                else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                    if (req) {
                        req.onreadystatechange = funcReadyStateChange;
                        req.open("GET", url, true);
                        req.send();
                    }
                }
            }

            function funcReadyStateChange(){
            
                if (req.readyState == 4){
                    if (req.status == 200){
                        var xml = req.responseXML;
                        var responseNode=xml.getElementsByTagName("response")[0];
                        var noOfBytesRead =responseNode.getElementsByTagName("bytes_read")[0].
                            childNodes[0].nodeValue;
                        var totalNoOfBytes = responseNode.getElementsByTagName("content_length")[0].
                            childNodes[0].nodeValue;
                        progressBarValue=noOfBytesRead/totalNoOfBytes*100;
                        document.getElementById("status").style.display="block";
                        document.getElementById("percentDone").innerHTML="Percentage Completed: "
                            +Math.floor(progressBarValue)+"%";
                        document.getElementById("bytesRead").innerHTML= "Number Of Bytes Read: "+
                            noOfBytesRead;
                        document.getElementById("totalNoOfBytes").innerHTML= "Total Number Of Bytes: "+
                            totalNoOfBytes;
                        document.getElementById("progressbarWrapper").style.display = "block";

                        if (progressBarValue<100){
                            window.setTimeout("ajaxFunction();", 100);
                            window.setTimeout("updateProgressBar(progressBarValue);", 100);

                        } else {
                            alert("Done");
                       
                        }
                    } else {
                        alert(req.statusText);
                    }
                }
            }

        </script>
    </head>
    <body>
        <center>
            <h2 class="backgroundClass">Sample File Upload</h2>
            <form id="myForm" enctype="multipart/form-data" method="post" target="uploadFrame"
                  action="/HyperMarket/FileUploadServlet" >
                <table border="1">
                    <tr><td> <h4>File to be uploaded </h4></td><td>  <input type="file" name="txtFile" id="txtFile" /></td></tr>
                    <tr><td align="center" colspan="2">  <input type="submit" id="submitID" name="submit" value="Upload" /></td></tr>
                </table>
            </form>
            <div id="progressbarWrapper" style="height:20px;width:100px; ">
                <div id="progressbar" style="height:100%;"></div>
            </div>
            <br/>
            <div id="status" style="display:none">
                <table width="100%" class="backgroundClass">
                    <tr>
                        <td align="center" nowrap="nowrap">
                            <div id="percentDone" style="font-weight: bold;">&nbsp;</div>
                        </td>
                    </tr>
                </table>
                <table width="100%" class="backgroundClass">
                    <tr>
                        <td align="center" nowrap="nowrap">
                            <div id="bytesRead" style="font-weight: bold;">&nbsp;</div>
                        </td>
                    </tr>
                </table>
                <table width="100%" class="backgroundClass">
                    <tr>
                        <td align="center" nowrap="nowrap">
                            <div id="totalNoOfBytes" style="font-weight: bold;">&nbsp;</div>
                        </td>
                    </tr>
                </table>
            </div>
        </center>
    </body>
</html>